<template>
	<!-- 特权福利-特权活动 -->
	<view class="privilege-activity">
		<scroll-view scroll-y="true" :style="'height:'+height+'px'" @scrolltolower="loadingMore">
			<view :class="index==0&&!fromHome?'topMarg privilege-content':'privilege-content'"  @click="toDetails(item.id)" v-for="(item,index) in list" :key="index">
				<view class="privilege-content-left">
					<view>
						<image :src="item.img_src" style="width: 100%;height: 100%;" mode="aspectFill"></image>
					</view>
					<view style="color: #FFFFFF;background: linear-gradient(to left, #B3EA00,#00A66A);">
						{{item.grade}}
					</view>
				</view>
				<view class="privilege-content-right">
					<view class="act_name">{{item.title|privi_val}}</view>
					<view v-if="isIos" style="display: flex;height: 100upx;">
						<view v-if="item.price>0" class="act_button_text" >立即参与				
						</view>
                        <view v-else class="act_button_text">免费领取
                        </view>
					</view>
                    <view class="act_button" v-if="!isIos" >
                    	<button v-if="item.price>0"  class="act_button_textone" catchtap="">立即参与</button>
                    	<button v-else class="act_button_textone" >免费领取</button>
                    </view>
                    <view class="act_bottom" v-if="!isIos">
                    	<view class="money_icon" v-if="item.achievement_value>0"></view>
                    	<text class="money_num" v-if="item.achievement_value>0">{{item.achievement_value}}+</text><text class="money_num">￥{{item.price}}</text>
                    	<text class="old_money">￥{{item.original_price}}</text>
                    </view>
					<view class="act_tags">
						<view class="act_tag" v-if="item.share_money>0&&!isIos">
							分享赚￥{{item.share_money}}
						</view>
						<view class="act_tag" style="margin-left: 10upx;" v-if="item.share_achievement_value>0">
							成就值+{{item.share_achievement_value}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import ending from '../../../common/ending.vue'
	export default{
		created() {
			this.getList()
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
		},
		components:{ending},
		data(){
			return{
				list:[],
				height: 0,
				last_page: 1,
				page: 1,
				pagesize: 10,
				token: this.$store.getters.getToken,				
				isIos:this.$isIos
			}
		},
		props: {
			fromHome: {
				type: Boolean,
				default: function(){
					return false
				}
			}
		},
		filters: {
			privi_val(value) {
				if (!value) return ''
				if (value.length > 28) {
					return value.slice(0, 28) + '...'
				}
				return value
			}
		},
		// onReady() {
		// 	console.log('123213213213213');
		// 	this.getList()
		// 	this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
		// },
		methods:{
			// 获取特权活动数据列表
			getList(){
				this.page = 1
				let data = {
					token: this.token,
					page:1,
					pagesize: this.pagesize
				}
				this.$api.getPrivilegedList(data).then(res => {
					console.log('获取特权活动数据列表',res)
					if(res.status){
						this.list = res.data.data
						this.last_page = res.data.last_page
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err => {
					console.log('获取特权活动数据列表',err)
				})
			},
			loadingMore() {
				this.page = this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					let data = {
						token: this.token,
						page:this.page,
						pagesize: this.pagesize
					}
					this.$api.getPrivilegedList(data).then(res => {
						console.log('获取特权活动数据列表第'+this.page+'页',res)
						if(res.status){
							this.list = this.list.concat(res.data.data)
							this.last_page = res.data.last_page
						}else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					}).catch(err => {
						console.log('获取特权活动数据列表',err)
					})
				}
			},
			toDetails(id){
				uni.navigateTo({
					url:'./welfareDetails/welfareDetails?id='+id
				})
			}
		}
	}
</script>

<style>
	.money_num {
		color: #FF3C00;
		font-size: 32upx;
	}
	.money_icon {
		width: 32upx;
		height: 32upx;
		margin-right: 4upx;
		background: url('https://lightplanet.tuanhaoke.cn/img/crown.png') no-repeat;
		background-size: 100% 100%;
	}
	.privilege-activity{
		width: 100%;
		height: 100%;
		position: relative;
		background: #F5F6F9;
	}
	.privilege-content{
		width: 100%;
		height: 290upx;
		box-sizing: border-box;
		display: flex;
		padding: 32upx;
		background: #fff;
		justify-content: space-between;
		margin-bottom: 20upx;
	}
	.topMarg{
		margin-top: 88upx;
	}
	.privilege-content-left{
		width: 240upx;
		height: 230upx;
		position: relative;
	}
	.privilege-content-left>view:first-child{
		width: 100%;
		height: 100%;
	}
	.privilege-content-left>view:last-child{
		font-family: PingFangSC-Medium;
		width: 100%;
		height: 50upx;
		font-size: 24upx;
		text-align: center;
		line-height: 50upx;
		background-color: rgba(0, 0, 0, 1);
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.privilege-content-right{
		width: 430upx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.act_name {
		color: #333;
		font-size: 30upx;
		height: 84upx;
	}
	.act_tags {
		color: #FF3C00;
		text-align:center;
		vertical-align:middle;
		font-size: 29upx;
		display: flex;
	}

	.act_tag {
        padding: 0 20upx;
		height:40upx;
        line-height: 40upx;
        font-size: 24upx;
		border-radius:12px;
		border:1px solid rgba(255,60,0,1);
	}
	.act_bottom {
		display: flex;
		align-items: center;
	}
	.old_money {
		color: #cccccc;
		font-size: 24upx;
		text-decoration: line-through;
		line-height: 34upx;
		margin-left: 10upx;
		margin-top: 6upx;
	}
	.act_button{
		width:190upx;
		height:60upx;
		position: absolute;		
		text-align: center;
		vertical-align:middle;
		background:linear-gradient(180deg,rgba(179,234,0,1) 0%,rgba(0,166,106,1) 100%);
		box-shadow:0px 2px 4px 0px rgba(0,166,106,0.35);
		border-radius:30upx;
		right: 15upx;
        margin-top: 88upx;
        margin-right: 20upx;
	}
    .act_button_text{
        width: 180upx;
        height: 60upx;
        background:linear-gradient( to top,#00A66A,#CBEC00) ;
        border-radius: 30upx;
        line-height: 60upx;
        font-size: 30upx;
        color:rgba(255,255,255,1);
        text-align: center;
        margin-left: 250upx;
    }
    .act_button_textone{
        width: 180upx;
        height: 60upx;
        background:linear-gradient( to top,#00A66A,#CBEC00) ;
        border-radius: 30upx;
        line-height: 60upx;
        font-size: 30upx;
        color:rgba(255,255,255,1);
        text-align: center;
        
    }
</style>
